import React, { Component } from 'react'

function ProHeader(props) {
  return (
    <div>
      <h2>用户昵称：{ props.nickName }</h2>
      <h2>用户等级：{ props.level }</h2>
    </div>
  )
}

function Profile(props) {
  return (
    <div>
      
      {/* <ProHeader nickName={props.nickName} level={props.level} /> */}
      <ProHeader {...props} />

      <ul>
        <li>设置1</li>
        <li>设置2</li>
        <li>设置3</li>
        <li>设置4</li>
        <li>设置5</li>
      </ul>
    </div>
  )
}

export default class App extends Component {
  constructor() {
    super()
    
    this.state = {
      nickName: 'yzhyzh',
      level: 9999
    }
  }

  render() {
    return (
      <div>
        {/* 1. */}
        {/* <Profile nickName={this.state.nickName} level={this.state.level} /> */}

        {/* 2. 因为state只有两个属性并且都是子组件需要的 所以直接属性展开*/}
        <Profile {...this.state} />
      </div>
    )
  }
}
